<template>
	<div class="List">
		<div class="List_T">
				<img :src='props.img' class="scroll_img" @load="Load"/>
		</div>
		<div class="List_B">
			<div class="text title">
					{{props.title}}
			</div>
			<div class="businessBox">
				<span  class="text businessName orange" >
					¥	{{props.price}}
				</span>
				<span class="openbusiness">
					{{salesVolume}}已购买
				</span>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
	import {defineComponent} from 'vue'
	export default defineComponent({
		props:{
			img:{
				type:String,
				default:''
			},
			title:{
				type:String,
				default:''
			},
			price:{
				type:Number,
				default:0,
			},
			salesVolume:{
				type:Number,
				default:0
			},
			businessName:{
				type:String,
				default:''
			},
			Echo:{
				type:Object,
				default:{}
			}
		},
		setup(props,context){
			function Load(e:any){
				context.emit('Load',{
					Echo:props.Echo,
					height:e.target.height
				})
			}
			return{
				props,
				Load
			}
		}
	})
</script>

<style>
	.List{
		width:100%;
		border-radius: 5px;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		padding: 5px;
		box-sizing: border-box;
	}
	.List_T img{
		width:100%
	}
	.List_B{
		padding:5px;
		box-sizing: border-box;
	}
	.text{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		word-break: break-all;
	}
	.title{
		font-size: 1em;
		line-height: 25px;
		-webkit-line-clamp: 2;
	}
	.businessBox{
		font-size: 16px;
		line-height: 16px;
		padding:0px;
		padding-top:5px;
		padding-left: 10px;
		border-radius: 10px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	.businessName{
		width: calc(100% - 66px);
		height: 16px;
		display: inline-block;
		-webkit-line-clamp: 1;
	}
	.openbusiness{
		color: #999999;
		font-size: .8em;
	}
	
</style>